<template>
  <!-- 书写html结构 只可以有一个div 但是可以嵌套多个div -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="系统消息"
      left-text="返回"
      left-arrow
      @click-left="returnTo" />
    <van-card
      v-for="item in databaseName"
      v-if="0 == item.idle"
      price="无需等待，可立即洗车"
      :title="item.stationName"
      currency=""
      :thumb="item.picture"
      style="text-align: left; font-size: 15p"
      @click="loadwash(item.stationName,item.stationId)">
      <template #tags>
        <br />
        <div>
          <div
            style="
              width: 50px;
              height: 18px;
              text-align: center;
              line-height: 18px;
              color: black;
              background-color: #38ac83;
              float: left;
              margin-left: 5px;
            ">
            空闲中
          </div>
        </div>
        <br />
      </template>
    </van-card>

    <van-card
      v-for="item in databaseName"
      v-if="1 == item.idle"
      price="正在被使用，需要等待"
      :title="item.stationName"
      currency=""
      :thumb="item.picture"
      style="text-align: left; font-size: 15p"
      @click="loadwash(item.stationName,item.stationId)">
      <template #tags>
        <br />
        <div>
          <div
            style="
              width: 50px;
              height: 18px;
              text-align: center;
              line-height: 18px;
              color: white;
              background-color: #ffa738;
              float: left;
              margin-left: 5px;
            ">
            正在使用
          </div>
        </div>
        <br />
      </template>
    </van-card>

    <van-col span="9"> </van-col>
    <van-popup
      v-model="popupVisible"
      position="bottom"
      :style="{ height: '42%' }">
      <van-radio-group v-model="selectedOption">
        <van-radio
          v-for="option in options"
          :name="option.carNo"
          style="margin-top: 3%">
          {{ option.carNo }}
        </van-radio>
      </van-radio-group>
      <van-button type="primary" @click="submit" style="margin-top: 1%"
        >确定</van-button
      >
    </van-popup>
  </div>
</template>
<!--书写组件配置项目  相当于写js代码的地方 -->
<script>
import { Toast } from "vant";
//数据 全是json格式
export default {
  //注册属性 父传子 数据传递
  props: {},
  data() {
    //定义数据
    return {
      databaseName: [],
      popupVisible: false,
      selectedOption: "",
      options: [],
      carId: "",
      storeId: "",
      userId: "",
      amount: "",
      stationName: "",
    };
  },
  //初始化数据
  created() {
    this.loadStar();
  },
  //方法书写
  methods: {
   loadwash(stationName) {
      //没有绑定该门店
      Dialog.confirm({
        title: "提示",
        message: "是否开始洗车",
      })
        .then(() => {
          //不是直接使用axios 而是使用$http
          //baseURL="http://localhost:8080"
          var _this = this;
          this.$http
            .get("/car/queryStore?storeId=" + this.$route.query.id)
            .then(function (response) {
              console.log(response);
              if (response.data.code == 200) {
                if (response.data.data.length == 0) {
                  Toast("该门店未绑定车牌");
                } else {
                  _this.options = response.data.data;
                  _this.stationName = stationName;
                  _this.testku();
                }
                //this不可以直接使用 代表的是axios对象
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          Toast("已取消")
        });
    },
    submit() {
      // 处理提交逻辑，selectedOption为选中的选项值
      console.log(this.selectedOption);
      this.popupVisible = false;
      this.carNostore(this.selectedOption);
    },

    //检验该库是否正在被使用
    testku() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get(
          "/tbStation/queryStoreName?storeId=" +
            this.$route.query.id +
            "&storeName=" +
            this.stationName
        )
        .then(function (response) {
          console.log(response);
          if (response.data[0].idle == 1) {
            Toast("该库正在被使用请等待");
          } else {
            alert(11111111111);
            _this.popupVisible = true;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //根据车牌查询
    carNostore(carNo) {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .post("/tbStore/storeUserCarId?carNo=" + carNo)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.carId = response.data.data[0].carId;
            _this.storeId = response.data.data[0].storeId;
            _this.userId = response.data.data[0].userId;

            _this.queryUserAndStore();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询是否有余额
    queryUserAndStore() {
      var _this = this;
      console.log("根据token查询当前登录用户信息。。。。。");
      this.$http
        .get(
          "/balance/queryUserAndStore?userId=" +
            this.userId +
            "&storeId=" +
            this.storeId
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.amount = response.data.data.amount;
            if (_this.amount == 0) {
              Toast("余额为" + _this.amount + "元,请充值");
              setTimeout(function () {
                _this.$router.push({
                  path: "/Payment",
                  query: { storeId: _this.storeId },
                });
              }, 2000); // 定时时间
            } else {
              //开始洗车
              _this.beginwash();
            }
          }
        })
        .catch(function (error) {
          _this.$toast("获取用户余额错了111。。。");
        });
    },
    //开始洗车
    beginwash() {
            var _this = this;
      this.$http
        .post(
          "/checkoutInfo/addCar?userId=" +
            this.userId +
            "&carId=" +
            this.carId +
            "&storeId=" +
            this.storeId +
            "&stationName=" +
            this.stationName
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            Toast("开始洗车");
            setTimeout(function () {
               _this.$router.push('/')
              }, 1000); // 定时时间
            
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    returnTo() {
      this.$router.go(-1);
    },
    loadStar() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .post("/tbStation/queryAllStore", {
          pageNo: 1,
          pageSize: 300,
          data: { storeId: this.$route.query.id },
        })
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.databaseName = response.data.data.records;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  //声明注解
  components: {},
};
</script>
